<template>
  <table-header>
    <template #text>
      筛选结果
    </template>
    <template #right>
      <router-link :to="{name: '新建策略组'}">
        <u-button type="primary" icon="add">
          新建策略组
        </u-button>
      </router-link>
      <u-icon type="refresh-right" class="tb-ic" />
      <u-icon type="column-height" class="tb-ic" />
      <u-icon type="set" class="tb-ic" />
    </template>
  </table-header>
  <div class="cumpit" v-show="sum">
    已选择 <span class="text">{{ sum }}</span> 项
    <u-button type="text" @click="count" icon="add-circle-outline" class="iccen">
      添加策略
    </u-button>
    <u-button type="text" @click="count" icon="remove-circle-outline" style="margin-right: 15px;">
      从策略中移除
    </u-button>
    <u-button type="text" @click="count" icon="delete">
      删除策略组
    </u-button>
    <u-link :underline="false" @click="count" class="fl-right">
      取消选择
    </u-link>
  </div>
  <u-table
    :data="datas"
    :columns="columns"
    show-pagination
    stripe
    row-key="id"
    :pagination="{
      showTotal: true,
      showSizer: true,
      total: datas.length
    }"
    :selection="{
      selectedKeys,
      onChange: handleSelectChange,
    }"
  >
    <template #name="{ row }">
      <u-button type="text" @click="handleClick">
        {{ row.celve }}
      </u-button>
    </template>
    <template #input="{ row }">
      <u-select v-model="row.tf" placeholder="选择内容">
        <u-option label="是" value="1" />
        <u-option label="否" value="0" />
      </u-select>
    </template>
  </u-table>
</template>

<script>
import { getAllComponyTo } from '@/mock/atlas'
import tableHeader from '@C/tableHeader.vue'
import { ref, computed } from 'vue'

export default {
  components: {
    tableHeader
  },
  setup() {
    const columns = [
      { key: 'lei', title: '类型', width: 100 },
      {
        key: 'celve', title: '策略名称', ellipsis: true, minWidth: 150, slot: 'name'
      },
      { key: 'tf1', title: '是否进入策略图谱', width: 150 },
      {
        key: 'du', title: '策略数量', width: 120, sortable: true
      },
      { key: 'riqi', title: '策略创建时间', minWidth: 120 }
    ]
    const datas = getAllComponyTo().data
    const selectedKeys = ref([])
    const handleSelectChange = keys => {
      selectedKeys.value = [...keys]
    }
    const sum = computed(() => selectedKeys.value.length)

    const handleClick = row => {
      console.log(546, row)
    }
    const count = () => {
      selectedKeys.value = []
    }

    return {
      datas,
      columns,
      selectedKeys,
      handleSelectChange,
      handleClick,
      count,
      sum
    }
  }
}
</script>

<style scoped lang="less">
.fon {
  font-size: 20px;
}
.cumpit {
  background: #F5FAFE;
  padding: 15px;
  margin-bottom: 10px;
  height: 57px;
  line-height: 29px;
  .text {
    padding: 0 8px;
    color: #709EC9;
  }
  .iccen {
    margin: 0 15px;
  }
  .fl-right {
    float: right;
  }
}

</style>
